/*general*/

html{
    scroll-padding-top: 75px;
}
.container.fluid{
    width:100%; 
    padding:0 20px;
}


/*NAVBAR*/
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    min-height: 75px;; 
    padding: 10px 20px;
    margin: 0;
    background-color: rgba(30,69,96,0.9);
    width: 100%; 
    position: fixed;
    top: 0;
    z-index: 1000; 
}
.navbar-nav{
    display:flex; 
    flex-direction:column; 
    align-items: center;
    
}

.logo-container {
    position: relative; 
    display: inline-block;
    height: 14vh;
}

.navbar-logo {
    max-width: 130px; 
    max-height: 150px; 
    height: auto; 
    width: auto; 
    transition:opacity 0.3s ease-in-out; 
  
}

.logo-text {
    position: absolute;
    top: 50%;
    transform: translate(-40%, -50%); /* Adjust translation */
    transform:translateY(-50%);
    width: max-content;
    text-align: center;
}   

.word-container {
    display: flex; 
    flex-wrap: wrap;  /* Prevents forced word breaking */
    justify-content: center;
    gap: 10px;
}
.words {
    display: inline-block;  /* Prevents unintended breaking */
    font-family: "Space Grotesk", sans-serif;
    color: white;
    font-size: 1.2rem; 
    font-weight: bold; 
    opacity: 0; 
    transform: translateY(10px); 
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.logo-container:hover .logo-text{
    opacity:1;
}
.logo-container:hover .words.first {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.logo-container:hover .words.second {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.logo-container:hover .words.third {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.logo-container:hover .words.fourth {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.logo-container:hover .words.fifth {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.logo-container:hover .words.sixth {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.navbar-nav.ms-auto .nav-link{
    color: white !important;
    font-family: "Space Grotesk", serif;
    font-size:medium;
    border-radius:20px; 


}
.navbar-nav.ms-auto .nav-link.active {
    color: white !important;
    font-family: "Space Grotesk", serif;
    font-size:medium;
    border-radius:20px; 

}


.navbar-nav.ms-auto .nav-link:hover {
    color: white !important;
    background-color: rgba(30,69,96);
    font-size:large;
    border-radius:5px; 

}

.navbar-toggler-icon {
    background-color: transparent; /* Transparent background */
    filter: invert(1) grayscale(0) sepia(0) saturate(0) hue-rotate(0deg) brightness(100%) contrast(100%) drop-shadow(0 0 0 white);
    border: none; /* Remove border */
  }


body{
    padding-top:100px;
}

/*language switch*/
.language-switcher {
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: x-small;
    margin-top: 10px;
    flex-direction: row;
    width: 100%;
}

.language-switcher .lang-link {
    color: white;
    text-decoration: none;
    font-weight: normal;
    margin: 0 5px;
    transition: color 0.3s ease;
    font-family: "Space Grotesk", serif;
}

.language-switcher .lang-link:hover {
    background-color: rgba(30,69,96);
    border-radius: 5px;
}

.language-switcher span {
    color: white;
    margin: 0 5px;
}

/*video*/

.video-background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.video-background video{
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%);
    width:100%; 
    height:100%; 
    object-fit: cover;
}
#introduccion{
    position:relative; 
    width:100%;
    height:100vh;
    overflow: hidden; 
    color:white; 
}
#introduccion::before{
    content:"";
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: rgba(30,69,96,0.6);
    z-index: -1;
}
.video-text{
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:white; 
    width:100%;
    text-align:center;
    padding: 0 20px;
    z-index: 1;

}
#introduccion h1{
    font-family: "Roboto Mono", serif !important;
    color:white;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    padding:10px;

    
}
/* TECHNOLOGÍA Section */
#tecnologia {
    background-color: rgba(39, 122, 166, 0.2);
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding:20px;
}

#tecnologia h1 {
    font-family: "Roboto Mono", serif;
    color: rgb(70, 96, 110);
}

#tecnologia p {
    font-family: "Spectral", serif;
    text-align: center;
    padding: 20px;
    border-radius: 7px;
    margin: 0 auto;
}

/* Hide Header Initially */
.animated {
    opacity: 0;
}

/*SOFTWARE*/

#software .container-fluid{
    width:100vw; 
    padding:0; 
    margin:0; 
}
#software h1 {
    font-family: "Roboto Mono", serif;
    color: white;
    width: 100%;
    padding: 0 20px;
    margin: 0; 
}

/* SOFTWARE */
#software {
    overflow: hidden;
    position: relative;
    display: flex;
    z-index: 1;
    height:80vh;
}


#software h1 {
    font-family: "Roboto Mono", serif;
    color: white;
    width: 100%;
    top:30%;
    z-index: 2;
    position:relative;
    padding-top: 20px;

}

#software p {
    font-family: "Spectral", serif;
    color: white;
    text-align: center;
    top:32%;
    z-index: 2;
    position:relative;
    padding-bottom:15px;
    margin-bottom: 20px;
}
.carousel{
    width:100vw; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
}
.carousel-item{
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    position:relative;
    display:flex; 
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    z-index: 1;
}

.carousel-item h1,.carousel-item p{
    opacity:0; 
    transition:opacity 0.3s ease-in-out;
}
.carousel-item:nth-child(1){
    background-image: url('../img/img1.jpg');
}
.carousel-item:nth-child(2){
    background-image: url('../img/img2.jpg');
}
.carousel-item:nth-child(3){
    background-image: url('../img/img3.jpg');
}
.carousel-item:nth-child(4){
    background-image: url('../img/img4.jpg');
}
.carousel-item::before{
    content:'';
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
   background: rgba(0,0,0,0.8);
   z-index: 0;
}

.button-container{
    display:flex; 
    justify-content: center;
    align-items: center;
    height:auto;
    padding-bottom: 10px;

}
.button-special {
    font-size:large;
    font-family: "Poppins", serif;
    display: inline-block;
    padding: 10px 20px;
    background-color:rgba(70,96,110,0.9);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 1;
    margin-top: 20px;

}

.button-special:hover {
    background-color:rgba(70,96,110);
    color:white;
    font-size:17px; 
    font-weight:400;
}

/*ABOUT US*/
#AboutUs {
    padding: 50px;
    background-image: url('../img/img5.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    position:relative;
}
#AboutUs::before{
    content:"";
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-color: rgba(8, 35, 55, 0.7);
    z-index: 0;
    overflow: hidden;
}

#AboutUs h1 {
    font-family: "Roboto Mono", serif !important;
    color:white;
    position:relative;

}
#AboutUs hr{
    color:white;
    position:relative;
}
#AboutUs h3 {
    font-family: "Space Grotesk", serif;
    margin-top: 10px;
    margin-bottom: 20px;
    position:relative;
    color:white;
}

#AboutUs p {
    font-family: "Spectral", serif;
    position:relative;

}

.text-column {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    text-align: justify;
    position:relative;

}
#AboutUs .container-fluid{
    padding:0; 
}
#AboutUs .row{
    margin:0; 
    width:100%;
}


.img-box{
    justify-content: center;
    align-items: center;
}


/*PRODUCTOS*/

#productos{
    padding-top: 30px;
    margin-bottom: 0;
    background-color: rgba(30,69,96,0.9);

}


#productos h1{
    font-family: "Roboto Mono", serif !important;
    color: white;
    text-shadow: 2px 2px 5px rgba(30,69,96);
    font-size: 70px;
    text-align: center;
    opacity:0;
}

#productos h2, #productos h3{
    font-family: "Space Grotesk",serif;
    font-size: medium;
    color:white;
    text-align: center;
    padding-bottom: 20px;
    font-size:large; 
}


/*CARACTERISTICAS*/
#caract{
    position:relative; 
    background-image: url('../img/img8.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top:20px;

}

#caract::before{
    content:"";
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    background-color: rgba(0,0,0,0.7);
    z-index: 0;
}
#caract h3{
    font-family: "Roboto Mono", serif !important;
    color:white;
    position:relative;
    padding-top: 20px;
    

}
#caract li{
    font-family: "Spectral", serif;
    font-size: medium !important;
    color:white;
    position:relative;
    justify-content: center;

}
/*modulos*/

#modulos {
    background-color: rgba(30,69,96,0.9);
    z-index: 2;
  }
  
  #modulos h3 {
    font-family: "Roboto Mono", serif !important;
    color: white;
    position: relative;
    padding-top: 30px;
  }
  
  #modulos ul {
    font-family: "Spectral", serif;
    font-size: large !important;
    color: white;
    position: relative;
    justify-content: right;
    padding:20px;
  }
  
  #modulos .col-md-6 {
    display: flex; 
    justify-content: center; 
    align-items: center;
    padding: 0; 
    position: relative;
  }
  
  #modulos .row .col-md-6:first-child {
    background-image: url('../img/img6.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 70vh;
  }
  
  #modulos .row .col-md-6:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); 
    z-index: 0; 
  }
  
  #modulos .row .col-md-6:first-child h3 {
    position: relative;
    z-index: 1; 
    text-align: center; 
  }

/*APLICACIONES*/

#aplicaciones .row .col-md-4{
    text-align: center;
}
#aplicaciones h3{
    font-family: "Roboto Mono", serif !important;
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    color: rgba(30,69,96);
}
#aplicaciones li{
    font-family: "Spectral", serif !important;
    color: rgba(30,69,96,0.9);

}
#aplicaciones .imagetop{
    height: 200px;
    width:auto;
    padding: 10px;
    border-radius: 20px;

}
.google-play-btn {
    width: 150px; 
    height: auto;
    margin-top: 10px;
    margin:0 auto; 
    display: block;
    padding-top: 10px;
}

/*SOFTWARE*/
#specialized .row .col-md-6{
    text-align: center;
}
#specialized {
    background-color: rgb(70, 96, 110,0.2);
    padding:20px; 
}


#specialized h1{
    font-family: "Roboto Mono", serif !important;
    text-align: center;
    padding:20px;
    color: rgba(30,69,96);

}

#specialized p{
    text-align: justify;
    font-family: "Spectral", serif !important;
    color: rgba(30,69,96,0.9);

}

#specialized img{
    height: 250px;
    width:auto;
    padding: 10px;
    border-radius: 20px;
}

#design {
    padding:20px; 
    position:relative;
    width:100%; 
    height:60vh; 
    overflow:hidden;
}
#background-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
#design::before{
    content:"";
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: rgba(30,69,96,0.4);
    z-index: -1;
}
#design .content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
}


#design h1{
    font-family: "Roboto Mono", serif !important;
    color: white;
    text-align: center;
    padding-top:20px; 
    z-index: 2;
    position:relative;

}
#design p{
    font-family: "Spectral", serif !important;
    text-align: justify ;
    color:white; 
    z-index: 2;
    position:relative;

}
#cloud .row .col-md-6{
    text-align: center;
}
#cloud {
    background-color: rgb(70, 96, 110,0.3);
    padding:20px; 
}


#cloud h1{
    font-family: "Roboto Mono", serif !important;
    text-align: center;
    padding:20px;
    color: rgba(30,69,96,0.9);

}

#cloud p{
    text-align: justify;
    font-family: "Spectral", serif !important;
    padding:10px;
    color: rgba(30,69,96);

}

#cloud img{
    height: 250px;
    width:auto;
    padding: 10px;
    border-radius: 20px;
}

#integration  {
    padding:20px; 
    position:relative;
    width:100%; 
    height:85vh; 
    overflow:hidden;
}
#background-video2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
#integration::before{
    content:"";
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: rgba(30,69,96,0.9);
    z-index: -1;
}
#integration  .content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
    color:white; 

}


#integration h1{
    font-family: "Roboto Mono", serif !important;
    text-align: center;
    padding:20px; 
    z-index: 2;
    position:relative;
    font-weight: normal;
    text-shadow: none;

}
#integration p{
    font-family: "Spectral", serif !important;
    text-align: justify ;
    z-index: 2;
    position:relative;
    font-weight: normal;
    text-shadow: none;
}
/*AVISO*/
#aviso .informacion{
    text-align: justify;
    padding-left: 20vh;
    padding-right: 20vh;
    font-family: "Spectral", serif !important;

}

/*contacto*/
#contact{
    padding:20px;
}
#contact .col-md-6:nth-child(2){
    background-image: url("../img/img10.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;

}
#contact img{
    height: 50vh;
    width:auto;
    padding: 10px;
    border-radius: 20px;
}
#contact h1{
    font-family: "Roboto Mono", serif !important;
    color: rgba(30,69,96,0.9);
}
#contact h2{
    font-family: "Poppins", serif;
}
#contact p{
    font-family: "Spectral", serif !important;
}
.contact-form{
    background: rgb(39,122,166,0.2);
    padding:10px;
    border-radius: 20px;
}
.form-group{
    font-family: "Spectral", serif !important;


}

/*FOOTER*/
.pie{
    background-color: rgb(70, 96, 110,0.3);
    font-family: "Space Grotesk", serif;
    font-size:small;
 
}
.pie.link{
    background-color: rgb(39,122,166,0.2);
    color:rgb(39,122,166,0.8);
    font-family: "Space Grotesk", serif;
    font-size:small;
    text-decoration: underline;
 }

 /*ERROR*/
 #error {
    padding: 50px;
    text-align: center;
 }
 #error h1{
    font-family: "Roboto Mono", serif !important;
    color: rgba(30,69,96,0.9);
    font-size: 80px !important;
 }
 #error p{
    font-family: "Spectral", serif;
 }
 
 #error img{
    height: 50vh;
    width:auto;
    padding: 10px;
    border-radius: 20px;
 }